import React, { useEffect } from 'react'
import NavBar from '../../../components/Navbar'
import './index.less'
import { getDebrisList, debrisBuy, getValentineList } from '../../../api/active'
import { useState } from 'react'
import { Toast } from 'antd-mobile'
import { GetUserInfo } from '../../../api/mine'
import { useNavigate } from 'react-router-dom'
import { compareVersions, getVersion } from '../../../utils/util'
import appSdk from '../../../utils/app_sdk'

function ValentineProduct() {
  const navigate = useNavigate()
  const [dataList, setDataList] = useState([])
  const [xiQueNum, setXiQueNum] = useState(0)
  const [userinfo, setUserinfo] = useState()

  useEffect(() => {
    if (compareVersions(getVersion() || '1.0.0', '2.2.0') !== -1) {
      appSdk('setFullScreen', 0)
    }
    getDebrisList().then((res) => {
      console.log(res)
      setDataList(res.data)
    })
    getValentineList().then((res) => {
      setXiQueNum(res.data.xique_num || 0)
    })
    GetUserInfo().then((res) => {
      console.log('userinfo', res)
      setUserinfo(res.data)
    })
  }, [])

  const buy = (item) => {
    debrisBuy({
      id: item.id,
      type: item.type
    }).then((res) => {
      Toast.show({
        content: '兑换成功',
        maskClickable: false
      })
      getValentineList().then((res) => {
        setXiQueNum(res.data.xique_num || 0)
      })
    })
  }

  return (
    <div className="product_wrap">
      <NavBar title="七夕兑换商城" />
      <div className="useInfo">
        <div className="avatar">
          <img src={userinfo?.headimgurl} alt="" />
        </div>
        <div className="info">
          <div className="nickname">{userinfo?.nickname}</div>
          <div className="nums-txt">
            我的喜鹊数:{xiQueNum}{' '}
            <span className="btn" onClick={() => navigate('/valentine/record')}>
              兑换记录
            </span>{' '}
          </div>
        </div>
      </div>
      <div className="content_list">
        {dataList.map((item) => (
          <div className="item" key={item.id}>
            <div className="img">
              <img src={item.img} alt="" />
            </div>
            <div className="name">{item.name}</div>
            <div className="price">
              <span>{item.debris_num}</span>
              <div className="icon"></div>
            </div>
            <div className="btn" onClick={() => buy(item)}></div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default ValentineProduct
